<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stream Output Example</title>
  </head>
  <body>
    <h1>Streamed Output</h1>
    <div id="output"></div>

    <script>
      async function streamData() {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts')
        const reader = response.body.getReader()
        const outputDiv = document.getElementById('output')
        let result

        // 读取数据流
        while (!(result = await reader.read()).done) {
          const chunk = new TextDecoder().decode(result.value)
          // 将新接收到的部分添加到输出
          outputDiv.innerHTML += chunk + '<br>'
        }
      }

      streamData()
    </script>
  </body>
</html>
